import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { Table, Tag, Space, Divider, Button, Modal, Spin, message, Select, Form, Input, DatePicker} from 'antd';
import { postRepairInfoAction } from '../../store/repairInfoStore/actionCreators';

//空调报修
//宿舍号，报修人，报修人联系方式，报修问题详述
const { Option } = Select;

export default memo(function Repair() {

    const dispatch = useDispatch()
    //表单布局
    const layout = {
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      };
      const tailLayout = {
        wrapperCol: {
          offset: 8,
          span: 16,
        },
      };

    const [form] = Form.useForm();
    // const [messageApi, contextHolder] = message.useMessage();
    const onFinish = (values) => {
        // console.log(values);

        dispatch(postRepairInfoAction(values));
        form.setFieldsValue({
            repair_room_number: "",
            repair_student_name: "",
            repair_air_number: "",
            repair_student_number:"",
            repair_problem: ""

        })
        
      };
    return (
        <div>
            {/* {contextHolder} */}
            <Divider orientation="left">空调报修</Divider>
            <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFinish}
                style={{
                    maxWidth: 600,
                }}
                >
                <Form.Item
                    name="repair_room_number"
                    label="宿舍号"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="repair_student_name"
                    label="报修人"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="repair_air_number"
                    label="空调编号"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="repair_student_number"
                    label="联系方式"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="repair_problem"
                    label="报修问题详述"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input.TextArea rows={6} />
                </Form.Item>
                
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                    提交
                    </Button>
                </Form.Item>
            </Form>

        </div>
    )
})